<template>
  <div class="searchingView">
    <header>
      <div class="toSearching">
        <svg
          t="1677415686915"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6270"
          width="16"
          height="16"
        >
          <path
            d="M769.322667 708.992l182.741333 182.698667-60.373333 60.373333-182.698667-182.741333A382.293333 382.293333 0 0 1 469.333333 853.333333c-211.968 0-384-172.032-384-384s172.032-384 384-384 384 172.032 384 384a382.293333 382.293333 0 0 1-84.010666 239.658667z m-85.589334-31.658667A297.685333 297.685333 0 0 0 768 469.333333c0-165.034667-133.674667-298.666667-298.666667-298.666666-165.034667 0-298.666667 133.632-298.666666 298.666666 0 164.992 133.632 298.666667 298.666666 298.666667a297.685333 297.685333 0 0 0 208-84.266667l6.4-6.4z"
            fill="#999999"
            p-id="6271"
          ></path>
        </svg>
        <input
          v-model="searchText"
          type="text"
          placeholder="请输入作品名，创作人"
          @keyup.enter="toSearched(searchText)"
        />
        <svg
          v-show="searchText"
          @click="clearInput"
          t="1677425022737"
          class="icon1"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7574"
          width="18"
          height="18"
        >
          <path
            d="M510.1 475.9L378.4 339.5c-10.4-10.7-27.4-10.9-38.1-0.5-5.2 4.9-8.2 11.7-8.3 18.9-0.2 7.2 2.6 14.1 7.5 19.2l131.7 136.4-136.4 131.7c-10.7 10.4-10.9 27.4-0.5 38.1 4.9 5.2 11.7 8.2 18.9 8.3 7.2 0.2 14.1-2.6 19.2-7.5l136.4-131.7 131.7 136.4c10.4 10.7 27.4 10.9 38.1 0.5 5.2-4.9 8.2-11.7 8.3-18.9 0.2-7.2-2.6-14.1-7.5-19.2L547.7 514.8l136.4-131.7c10.7-10.4 10.9-27.4 0.5-38.1-4.9-5.2-11.7-8.2-18.9-8.3-7.2-0.2-14.1 2.6-19.2 7.5L510.1 475.9zM220.4 793.2c-155.7-161.3-151.2-418.2 10-574 161.3-155.7 418.2-151.2 574 10 155.7 161.3 151.3 418.2-10 574-161.3 155.7-418.2 151.3-574-10z m0 0"
            fill="#999999"
            p-id="7575"
          ></path>
        </svg>
      </div>
      <div class="cancel" @click="back">取消</div>
    </header>
    <div class="historySearchBox" v-if="historySearchs.length > 0">
      <div class="top">
        <div class="title">历史搜索</div>
        <div class="clear" @click="clearHistory">
          <svg
            t="1677427369154"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10654"
            width="18"
            height="18"
          >
            <path
              d="M744.727273 279.272727v558.545455a23.272727 23.272727 0 0 1-23.272728 23.272727H302.545455a23.272727 23.272727 0 0 1-23.272728-23.272727V279.272727h465.454546m69.818182-69.818182H209.454545v628.363637a93.090909 93.090909 0 0 0 93.09091 93.090909h418.90909a93.090909 93.090909 0 0 0 93.09091-93.090909V209.454545z"
              fill="#999999"
              p-id="10655"
            ></path>
            <path
              d="M430.545455 768a34.909091 34.909091 0 0 1-34.909091-34.909091v-279.272727a34.909091 34.909091 0 0 1 69.818181 0v279.272727a34.909091 34.909091 0 0 1-34.90909 34.909091zM593.454545 768a34.909091 34.909091 0 0 1-34.90909-34.909091v-279.272727a34.909091 34.909091 0 0 1 69.818181 0v279.272727a34.909091 34.909091 0 0 1-34.909091 34.909091zM884.363636 279.272727H139.636364a34.909091 34.909091 0 0 1 0-69.818182h744.727272a34.909091 34.909091 0 0 1 0 69.818182z"
              fill="#999999"
              p-id="10656"
            ></path>
            <path
              d="M613.236364 162.909091l5.818181 46.545454h-214.10909l5.818181-46.545454h202.472728m20.48-69.818182H390.283636a46.545455 46.545455 0 0 0-46.545454 40.727273L325.818182 279.272727h372.363636l-18.152727-145.454545a46.545455 46.545455 0 0 0-46.545455-40.727273z"
              fill="#999999"
              p-id="10657"
            ></path>
          </svg>
        </div>
      </div>
      <div class="historySearchs">
        <div
          class="historySearch"
          v-for="(historySearch, index) in historySearchs"
          :key="index"
          @click="toSearched(historySearch)"
        >
          {{ historySearch }}
        </div>
      </div>
    </div>
    <div class="hotSearchBox">
      <div class="title">热门搜索</div>
      <div class="hotSearchs" v-if="hotSearchs">
        <div
          class="hotSearch"
          v-for="hotSearch in hotSearchs"
          :key="hotSearch.id"
          @click="toSearched(hotSearch.name)"
        >
          {{ hotSearch.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchingView",
  data() {
    return {
      searchText: "",
      hotSearchs: null,
      historySearchs: null,
    };
  },
  created() {
    this.getData();
    this.historySearchs = JSON.parse(localStorage.getItem("nsHistory") || "[]");
    this.searchText = this.$route.query.kw || "";
  },
  methods: {
    getData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(`https://apis.netstart.cn/xpc/search/recommend_kws`)
        .then((res) => {
          // console.log(res.data.data);
          this.hotSearchs = res.data.data.list;
          this.$toast.clear();
        });
    },
    clearInput() {
      this.searchText = "";
    },
    back() {
      window.history.go(-1);
    },
    toSearched(kw) {
      if (!kw) {
        this.$toast("请输入搜索内容");
      } else {
        this.$router.replace({ path: "/searched", query: { kw } });

        let history = JSON.parse(localStorage.getItem("nsHistory") || "[]");
        if (history.indexOf(kw) != -1) {
          history = history.filter((o) => o != kw);
        }
        history.unshift(kw);
        localStorage.setItem("nsHistory", JSON.stringify(history));
        this.historySearchs = history;
      }
    },
    clearHistory() {
      localStorage.setItem("nsHistory", "");
      this.historySearchs = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.searchingView {
  padding-top: 70px;

  header {
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #f2f2f2;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .toSearching {
      margin-left: 15px;
      background-color: #f0f0f0;
      border-radius: 5px;
      height: 36px;
      display: flex;
      align-items: center;
      width: 295px;

      .icon {
        margin-left: 14px;
        margin-right: 7px;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
      }

      .icon1 {
        width: 22px;
        height: 22px;
        margin-left: 8px;
        flex-shrink: 0;
      }

      input {
        background: none;
        outline: none;
        // border: 1px solid #ccc;
        border: none;
        padding: 0;
        font-size: 14px;
        color: #999;
        width: 215px;
        flex-shrink: 0;
      }

      input:focus {
        border: none;
      }
    }

    .cancel {
      font-size: 16px;
      margin-right: 15px;
    }
  }

  .hotSearchBox {
    padding: 0 15px;
    margin-bottom: 30px;

    .title {
      font-weight: bold;
      font-size: 15px;
      color: #999;
      margin-bottom: 20px;
    }

    .hotSearchs {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;

      .hotSearch {
        font-size: 12px;
        padding: 7px 16px;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
      }
    }
  }

  .historySearchBox {
    padding: 0 15px;
    margin-bottom: 30px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .title {
        font-weight: bold;
        font-size: 15px;
        color: #999;
      }

      .clear {
        width: 18px;
        height: 18px;
      }
    }

    .historySearchs {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;

      .historySearch {
        font-size: 12px;
        padding: 7px 16px;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
      }
    }
  }
}
</style>
